<template>
    <div class="add-commodity-container">
        <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="商品管理" text2="商品添加" :text3="username"/>
        <div class="add-commodity-content">
          <h4>商品添加</h4>
          <el-form ref="form" :model="form" label-width="80px">
             <el-form-item label="商品名称">
                 <el-input v-model="form.name" placeholder="商品名称"></el-input>
             </el-form-item>
             <el-form-item label="商品分类">
                <el-select v-model="form.region" placeholder="请选择商品分类" >
                <el-option v-for="item in classificationArr" :key="item.cateName" :label="item.cateName" :value="item.cateName"></el-option>
                </el-select>
            </el-form-item>
          </el-form>
          <p class="price">
              商品价格
              <el-input-number v-model="num" :min="0" label="描述文字"></el-input-number>
            </p>
            <p class="upload-img">
                图片上传
               <el-upload
                class="avatar-uploader"
                action="http://127.0.0.1:5000/goods/goods_img_upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </p>
            <p class="desc">
                商品描述
                <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="textarea">
                </el-input>
            </p>
            <el-button type="primary" @click="clickAdd">添加商品</el-button>
        </div>
    </div>
</template>

<script>
    import Crumbs from "../../components/Crumbs"
    import {categories,addGoods} from "@/apis/api"
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"xxx",
            username:"",
            form: {
                name: '',
                region: '',
            },
             num: 0,
             textarea: '',
             classificationArr:[],
             imageUrl:"",
             imgUrl:""
        }
    },
    created(){
      this.portrait=imgUrl
      this.username=account
      //获取商品分类
      categories().then(res=>{
        //   console.log(res)
          this.classificationArr=res.data.categories
      })
      
    },
    methods:{
        handleAvatarSuccess(res,file){
            console.log(res)
             this.imageUrl = URL.createObjectURL(file.raw)
             this.imgUrl=res.imgUrl
        },
        clickAdd(){
            addGoods({
                name:this.form.name,
                category:this.form.region,
                price:this.num,
                imgUrl:this.imgUrl,
                goodsDesc:this.textarea
            }).then(res=>{
                // console.log(res.data)
                if(res.data.code===0){
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                        });
                }
            })
        }
    }
}
</script>

<style lang=less scoped>
    .add-commodity-container{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
    }
    .add-commodity-content{
      flex:1;
      overflow:scroll;
      margin:20px;
      padding:30px;
      background-color:#fff;
      h4{
        padding-bottom:10px;
        border-bottom:1px solid #eee;
      }
      .el-form{
          margin-top:20px;
          width:400px;
      }
      .price,.upload-img,.desc{
          padding-left:15px;
          font-size:14px;
          color:#555;
          .el-input-number{
              margin-left:10px;
          }
      }  
      .el-upload{
              margin-top:15px;
          }
          .avatar-uploader,.el-upload {
            width:180px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
          .desc{
              width:400px;
              margin-top:15px;
          }
          .el-button{
              margin-left:50px;
              margin-top:20px;
              width:100px;
          }
    }
</style>